<template>
    <Drawer :title="props.modelValue.title" v-model="props.modelValue.state" width="420" :mask-closable="false" 
        @on-close="closeWin(false)"
        :styles="{ height: 'calc(100% - 55px)', overflow: 'auto', paddingBottom: '53px', position: 'static' }">

        <Form ref="validForm" :model="formData" :rules="ruleValidate">
            <FormItem label="套餐名" label-position="top" prop="name" :error="error.name">
                <Input v-model="formData.name" placeholder="请输入套餐名称" />
            </FormItem>

            <FormItem label="套餐价格（单位: 元）" label-position="top" prop="price" :error="error.price">
                <Input v-model="formData.price" placeholder="请输入套餐价格" style="width: 100%;"/>
            </FormItem>

            <FormItem label="有效时间(天)、-1 代表永久" label-position="top" prop="exp" :error="error.exp">
                <Input v-model.number="formData.exp" placeholder="请输入套餐有效时间" style="width: 100%;"/>
            </FormItem>

            <FormItem label="赠送积分数量" label-position="top" prop="score" :error="error.score">
                <Input v-model.number="formData.score" placeholder="请输入赠送积分数量" style="width: 100%;"/>
            </FormItem>

            <FormItem label="状态" label-position="top" :error="error.state">
                <Switch size="large" v-model="formData.state">
                    <template #open>
                        <span>启用</span>
                    </template>
                    <template #close>
                        <span>禁用</span>
                    </template>
                </Switch>
            </FormItem>
        </Form>

        <div class="demo-drawer-footer">
            <Button style="margin-right: 8px" @click="closeWin">关闭</Button>
            <Button type="primary" @click="handleForm">保存</Button>
        </div>
    </Drawer>
</template>

<script setup>

import {ref, reactive} from 'vue'
import RSS from "../../api/rssIndex.js";
import Tips from '../../message'

const props = defineProps({
    modelValue: {
        type: Object, required: true
    },
});

const formData = ref({...props.modelValue.row}) ;

const ruleValidate = reactive({
    name: [
        {required: true, message: "套餐名不允许为空" ,trigger: "blur"}, 
        {type: "string", max: 50, message: "套餐名称过长" ,trigger: "blur"}, 
    ],
    price: [
        {type: "string", pattern: /^\d+$/, required: true, message: "套餐价格必须是一个数字" ,trigger: "blur"},
    ],
    exp: [
        {type: "number", required: true, message: "套餐有效时间必须是一个数字" ,trigger: "blur"},
    ],
    score: [
        {type: "integer", required: true, message: "赠送积分数量必须是一个整数数字" ,trigger: "blur"}, 
    ],
  
}) ;

const emits = defineEmits(["update:model-value", "refresh-data"]) ;

const validForm = ref(null);  

const error = ref({}) ;  // 定义后端接口返回的错误信息

function handleForm() {
    error.value = {} ; // 重置错误消息
    validForm.value.validate(valid => {
         if (valid) {
            if (formData.value.id == null) {
                handleSave();
            }else{
                handleUpdate();
            }
         }
    })
}

function handleSave() {
  RSS.saveSvipConfig(formData.value).then(ret=> {
    if (ret.status) {
      Tips.success(ret.message);
      // 刷新数据
      emits("refresh-data") ;
      // 关闭窗口
      closeWin() ;
    }else{
       error.value = ret.error ;
    }
  })
}

function handleUpdate() {
  RSS.updateSvipConfig(formData.value).then(ret=> {
    if (ret.status) {
      Tips.success(ret.message);
      // 刷新数据
      emits("refresh-data") ;
      // 关闭窗口
      closeWin() ;
    }else{
      error.value = ret.error ;
    }
  })
}

function closeWin() {
    props.modelValue.row = null ; 
    props.modelValue.state = false; 
    emits("update:model-value", props.modelValue) ;
    validForm.value.resetFields(); 
    error.value = {} ; 
}


</script>

<style scoped>
.demo-drawer-footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  border-top: 1px solid #e8e8e8;
  padding: 10px 16px;
  text-align: right;
  background: #fff;
}
</style>